<template>
	<div class="hello">
		<el-row class="info-row" style="margin-bottom: 20px;">
			<el-col span="24" class="info-col">
				<p class="info-p-title padd-left">
					<el-input size="small" type="text" v-model="searchTxT" style="width: 200px;"></el-input>
					<el-button type="primary" @click="mapSearch" size="small" style="margin-left: 10px;">搜索</el-button>
					<el-button type="primary" @click="goInfoHotel" size="small" style="float: right;">返回</el-button>
					<el-button type="primary" v-if="$route.query.state!='edition_show'" size="small" @click="editionMap" style="float: right;margin-right: 10px;">{{btnState === 0 ? "编辑" : "保存"}}</el-button>
				</p>
			</el-col>
		</el-row>
		<div id="baiduMap"></div>
	</div>
</template>

<script>
	var newVue = "";
	export default {
		name: 'baiduMap',
		props: ['mapVisiable'],
		data() {
			return {
				searchTxT: "",
				map_local: "",
				map_map: "",
				point_lng: "",
				point_lat: "",
				mapState: true,

				addMapData: {
					visible: false,
					addressDesc: "", //地址描述
					averageError: "", //误差
				},
				overlays: [], //保存绘画对象
				btnState: 0,
			}
		},
		created() {
			var self = this;

		},
		watch: {
			point_lng(val) {
				this.point_lng = val;
			},
			point_lat(val) {
				this.point_lat = val;
			},
			mapVisiable(val) {
				this.initBeijing([116.404, 39.915]);
			},
			'$route' (to, from) {
				this.stateChange()
			},
		},
		mounted() {
			var self = this;
			this.stateChange();
			this.mapSearch('');
		},
		methods: {
			stateChange() {
				var overlay = this.inStorage("get", "overlay");
				if(!!this.$route.query.state&&this.$route.query.state!="edition_change") {
					this.btnState = 0;
					if(!overlay.wa) {
						this.initBeijing([116.404, 39.915]);
					} else {
						this.initBeijing([overlay.lng, overlay.lat]);
						this.drawOverlay();
					}
				}else if(this.$route.query.state=="edition_change"){
					this.initBeijing([overlay.lng, overlay.lat]);
					this.changeMap();
				}
			},
			mapInit() {
				//添加地图类型控件
				self.initBeijing();
			},
			drawOverlay() {
				var overlay = this.inStorage("get", "overlay");
				var clrcle = new BMap.Circle(new BMap.Point(overlay.lng, overlay.lat), overlay.wa, {
					strokeColor: "red", //边线颜色。
					fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
					strokeWeight: 3, //边线的宽度，以像素为单位。
					strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
					fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
					strokeStyle: 'solid' //边线的样式，solid或dashed。
				})
				this.map_map.addOverlay(clrcle); // 将标注添加到地图中
			},
			positionIp() {
				//ip定位
				var self = this;
				var myCity = new BMap.LocalCity();
				myCity.get(self.newIpMap);
			},
			//编辑或者保存
			editionMap() {
				var self = this;
				if(this.btnState === 0) {
					this.changeMap(self.map_map);
				} else {
					let data = {};
					if(!!self.overlays[0]){
						data = {
							lat: self.overlays[0].point.lat,
							lng: self.overlays[0].point.lng,
							wa: self.overlays[0].wa,
						}
					}else{
						data = {
							lat: 0,
							lng: 0,
							wa: 0,
						}
					}

					self.inStorage("set", "overlay", JSON.stringify(data));
					if(this.$route.query.state=="edition_change"){
						this.RouterTo(this, "/systemClockOn", {state:"changeData"});
					}else{
						this.RouterTo(this, "/systemClockOn", {state:"addData"});
					}
				}
			},
			//返回
			goInfoHotel(){
				this.RouterTo(this, "/systemClockOn");
			},
			//初始化地图
			initBeijing(point) {
				var self = this;
				self.map_map = new BMap.Map("baiduMap"); // 创建Map实例
				self.map_map.centerAndZoom(new BMap.Point(point[0], point[1]), 10); // 初始化地图,设置中心点坐标和地图级别
				self.map_map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
				self.map_map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
				self.map_local = new BMap.LocalSearch(self.map_map, {
					renderOptions: {
						map: self.map_map
					}
				});
			},
			//初始化获取定位位置
			newIpMap(result) {
				var cityName = result.name;
				self.map_map = new BMap.Map("baiduMap"); // 创建Map实例
				self.map_map.centerAndZoom(new BMap.Point(result.point), 11); // 初始化地图,设置中心点坐标和地图级别
				self.map_map.setCenter(cityName);
				self.map_map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
				self.map_local = new BMap.LocalSearch(self.map_map, {
					renderOptions: {
						map: self.map_map
					}
				});
			},
			//地图搜索
			mapSearch() {
				var self = this;
				var val = this.searchTxT;
				console.log(self.map_local);
				self.map_local.search(val);
			},
			changeMap() {
				// 百度地图API功能
				var self = this;
				var map = self.map_map;
				map.clearOverlays();
				this.btnState = 1;
				//	    var map = new BMap.Map('baiduMap');
				//	    var poi = new BMap.Point(116,40.057031);
				//				var map = new BMap.Map("baiduMap");    // 创建Map实例
				//				map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
				//	    map.centerAndZoom(poi, 16);
				map.enableScrollWheelZoom();
				var overlays = [];
				var styleOptions = {
					strokeColor: "red", //边线颜色。
					fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
					strokeWeight: 3, //边线的宽度，以像素为单位。
					strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
					fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
					strokeStyle: 'solid' //边线的样式，solid或dashed。
				}
				//实例化鼠标绘制工具
				var drawingManager = new BMapLib.DrawingManager(map, {
					isOpen: false, //是否开启绘制模式
					enableDrawingTool: true, //是否显示工具栏
					drawingToolOptions: {
						anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
						offset: new BMap.Size(10, 10), //偏离值
						drawingModes: [BMAP_DRAWING_CIRCLE],
					},
					circleOptions: styleOptions, //圆的样式
				});
				var overlaycomplete = function(e) {
					console.log(e)
					console.log(e.point)
					each(e, function(i, v) {
						console.log(i)
						console.log(v)
					})
					self.overlays.push(e.overlay);
					//					console.log(self.map_map.getZoom());
					if(self.overlays.length > 1) {
						map.removeOverlay(self.overlays[0]);
						self.overlays.splice(0, 1);
					}
				}
				//添加鼠标绘制工具监听事件，用于获取绘制结果
				drawingManager.addEventListener('overlaycomplete', overlaycomplete);
			},
		},
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#baiduMap {
		position: relative;
		height: 700px;
		width: 100%;
	}
</style>